<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <div class="search_box">
            <el-input v-model="searWord.title" placeholder="关键字" @keyup.enter.native="searchBtn" size="small"
                      class="w-140"></el-input>
            <el-date-picker
                v-model="addtime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                class="mr-10"
                :picker-options="pickerOptions1">
            </el-date-picker>
          </div>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置</el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="id"
                label="ID"
                width="80">
            </el-table-column>
            <el-table-column
                prop="time"
                label="会议时间"
                width="120">
            </el-table-column>
            <el-table-column
                label="会议主题"
                prop="title">
            </el-table-column>
            <el-table-column
                prop="description"
                label="会议简介">
            </el-table-column>

            <el-table-column
                label="参与人">
              <template slot-scope="scope">
                <!--                <el-tag-->
                <!--                    :key="tag.id"-->
                <!--                    v-for="tag in scope.row.join_user"-->
                <!--                    :disable-transitions="false"-->
                <!--                    class="mr-10"-->
                <!--                >{{ tag.realname }}-->
                <!--                </el-tag>-->
                <el-popover
                    placement="left-start"
                    title="会议参与人"
                    width="220"
                    trigger="hover">
                  <div class="tableline" v-if="scope.row.join_user.length">
                    <p class="list" v-for="item in scope.row.join_user" :key="item.id">
                      <span>{{item.realname}}</span>
                    </p>
                  </div>
                  <span slot="reference" class="tablelineBtn">共{{scope.row.join_user.length}}人参与</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
                label="主持人"
                width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.user.realname }}</span>
              </template>
            </el-table-column>
<!--            <el-table-column-->
<!--                label="发布人"-->
<!--                width="120">-->
<!--              <template slot-scope="scope">-->
<!--                <span>{{ scope.row.adduser.realname }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                label="操作"-->
<!--                width="140">-->
<!--              <template slot-scope="scope">-->
<!--                <el-dropdown @command="handleCommand" trigger="click">-->
<!--                  <el-button type="primary" size="mini">-->
<!--                    更多操作<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                  </el-button>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item :command="4+'-'+scope.$index">会议详情</el-dropdown-item>-->
<!--                    <el-dropdown-item :command="2+'-'+scope.$index">视频录制</el-dropdown-item>-->
<!--                    <el-dropdown-item :command="99+'-'+scope.$index">删除</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'

export default {
  components: {},
  data() {
    return {
      addtime: [],
      pickerOptions1: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e7 // 不包括今天
          return time.getTime() > Date.now()
        }
      },
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searWord: {
        title: '',
        star_time: '',
        end_time: '',
        type: 3,
        // 0发布1负责的会议2参加的会议3参与、负责4全部
      }
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.searWord.p = this.page.pageindex
      this.$fetch(this.api.videoMeet.index, this.searWord).then((response) => {
        if (response.code === 0) {
          // status 0关闭 1开启 switchvalue
          let array_ = []
          for (let i in response.list.data) {
            response.list.data[i].time = response.list.data[i].time.split(' ')[0]
            array_.push(response.list.data[i])
          }
          this.arryList = array_
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      if(this.addtime){
        this.searWord.start_time =  this.addtime[0]
        this.searWord.end_time = this.addtime[1]
      }else{
        this.searWord.start_time = ''
        this.searWord.end_time = ''
      }
      this.InitFn()
    },
    addActive(row) {
      let id = row || ''
      this.$router.push('/addvideoMeet?type=1&id=' + id)
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searWord.title = ''
      this.addtime = []
      this.searWord.start_time = ''
      this.searWord.end_time = ''
      this.InitFn()
    },
    handleDetel(index) {
      let this_ = this
      this.$confirm('此操作将永久删除 ' + this.arryList[index].name + ' 区角, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        this_.deletFn(index)
      }).catch(() => {
      })
    },
    deletFn(index) {
      this.$post(this.api.admin_corner_delete, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCommand(command) {
      // 获取到的参数内容
      // 删除 handleDetel
      let command_ = command.split('-')
      if (Number(command_[0]) === 1) {
        this.queryCorner.userInfo = this.arryList[command_[1]]
        this.queryCorner.cornerVisible = true
      }
      // 视频采集
      if (Number(command_[0]) === 2) {
        this.cornerVideoId = this.arryList[command_[1]].id
        this.connerName = this.arryList[command_[1]].name
        this.videoVisible = true
      }
      // 视频记录
      if (Number(command_[0]) === 3) {
        this.$router.push('/videoList?editId=' + this.arryList[command_[1]].id + '&name=' + this.arryList[command_[1]].name)
      }
      if (Number(command_[0]) === 4) {
        this.addActive(this.arryList[command_[1]].id)
      }
      if (Number(command_[0]) === 99) {
        this.handleDetel(command_[1])
      }
    }
  },
  mounted() {
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>
